<!DOCTYPE html>
<html>
	<head>
		<title>CSS3 Animated Menu - DEMO</title>
		<style>
		  * { margin:0; padding: 0;}
		  
		  body {
		    font-family: Helvetica, Verdana;
		    font-size: 12px;
		    background: rgb(42,32,30);
		  }
	  
		  div.container {
		    width: 300px;
		    margin: 0 auto;
		  }
		  
		  div.header {
		    width: 100%;
		    height: 30px;
		    line-height: 30px;
		    font-size: 12px;
		    background: rgb(78,92,127);
		    margin-bottom: 20px;
		  }
		  
		  div.header p {
		    padding: 0 10px;
		  }
		  
		  div.header a {
		    color: #FFF;
		    text-decoration: none;
		    font-weight: bold;
		  }
		</style>
		<link rel="stylesheet" type="text/css" href="nice-menu.css" />
   
	</head>
	<body>
	   <div class = "header">
	     <p><a href="http://www.marcelljusztin.com/blog/css-3/css-3-animated-menu/">Back to my blog</a></p>
	   </div>
	   <div class = "container" style = "">

	     <ul class = "nice-menu">
	       <li class = "orange"><a href = "">Home</a></li>
	       <li class = "red"><a href = "">About</a></li>
	       <li class = "green"><a href = "">Portfolio</a></li>
	       <li class = "blue"><a href = "">Blog</a></li>
	       <li class = "bright"><a href = "">Contact</a></li>

	       <li class = "red"><a href = "">What not?</a></li>
	     </ul>
	   </div>
	   <div class = "container" style = "">
	     <ul class = "nice-menu bounce">
	       <li class = "orange"><a href = "">Home</a></li>
	       <li class = "red"><a href = "">About</a></li>

	       <li class = "green"><a href = "">Portfolio</a></li>
	       <li class = "blue"><a href = "">Blog</a></li>
	       <li class = "bright"><a href = "">Contact</a></li>
	       <li class = "red"><a href = "">What not?</a></li>
	     </ul>
	   </div>
	
	</body>

</html>
